<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统 - 登录</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'button': '0 4px 14px 0 rgba(22, 93, 255, 0.4)',
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex items-center justify-center p-4">
<!-- 登录页面容器 -->
<div class="w-full max-w-6xl bg-white rounded-2xl shadow-card overflow-hidden flex flex-col md:flex-row">
    <!-- 左侧图片区域 -->
    <div class="w-full md:w-1/2 bg-gradient-blue p-8 md:p-12 flex items-center justify-center relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
            <div class="absolute -top-20 -left-20 w-60 h-60 rounded-full bg-white"></div>
            <div class="absolute top-1/3 right-10 w-40 h-40 rounded-full bg-white"></div>
            <div class="absolute bottom-10 -right-10 w-50 h-50 rounded-full bg-white"></div>
        </div>

        <div class="relative z-10 text-center">
            <img src="https://picsum.photos/id/180/600/400" alt="图书管理系统"
                 class="w-full max-w-md rounded-lg shadow-lg transform transition-all duration-500 hover:scale-105">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mt-6 text-shadow">图书管理系统</h2>
            <p class="text-white/80 mt-2 max-w-md mx-auto">高效、便捷的图书馆管理解决方案</p>
        </div>
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
        <div class="max-w-md mx-auto w-full">
            <!-- 标题 -->
            <div class="mb-8 text-center">
                <h3 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-text-primary">欢迎登录</h3>
                <p class="text-text-tertiary mt-2">请输入您的账号和密码</p>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" class="space-y-6">
                <!-- 用户名输入框 -->
                <div class="space-y-2">
                    <label for="userName" class="block text-sm font-medium text-text-secondary">用户名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-text-tertiary">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" name="userName" id="userName"
                               class="w-full pl-10 pr-4 py-3 border border-neutral-dark rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all-300"
                               placeholder="请输入用户名" required>
                    </div>
                </div>

                <!-- 密码输入框 -->
                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-text-secondary">密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-text-tertiary">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" name="password" id="password"
                               class="w-full pl-10 pr-4 py-3 border border-neutral-dark rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all-300"
                               placeholder="请输入密码" required>
                    </div>
                </div>

                <!-- 登录按钮 -->
                <div class="pt-2">
                    <button type="submit"
                            class="w-full bg-primary hover:bg-accent text-white font-medium py-3 px-4 rounded-lg shadow-button transition-all-300 transform hover:translate-y-[-2px] active:translate-y-0 flex items-center justify-center">
                        <span>登录</span>
                        <i class="fa fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </form>

            <!-- 底部版权信息 -->
            <div class="mt-12 text-center text-text-tertiary text-sm">
                <p>© 2025 图书管理系统. 保留所有权利.</p>
            </div>
        </div>
    </div>
</div>

<!-- 引入jQuery -->
<script src="/js/jquery.min.js"></script>

<!-- 登录逻辑 -->
<script>
    $(document).ready(function() {
        // 表单提交处理
        $('#loginForm').submit(function(e) {
            e.preventDefault();
            handleLogin();
        });
    });

    function handleLogin() {
        const username = $("#userName").val().trim();
        const password = $("#password").val().trim();

        // 表单验证
        if (!username) {
            showToast("用户名不能为空");
            return;
        }
        if (!password) {
            showToast("密码不能为空");
            return;
        }

        // 登录请求
        $.ajax({
            type: "POST",
            url: "/user/login",
            data: {
                username: username,
                password: password
            },
            success: function(response) {
                if(response.code=="SUCCESS"&&response.data){
                    showToast("登录成功", "success");
                    setTimeout(() => {
                        window.location.href = "book_list.html?currentPage=1";
                    }, 1500);
                } else {
                    showToast("登录失败");
                }
            },
        });
    }

    // 显示提示消息
    function showToast(message, type = "error") {
        // 移除现有toast
        $('.toast-message').remove();

        const iconClass = type === "success"
            ? "fa-check-circle text-green-500"
            : "fa-exclamation-circle text-red-500";

        const toast = $(`
            <div class="toast-message fixed top-4 right-4 flex items-center p-4 bg-white rounded-lg shadow-lg border-l-4 ${type === "success" ? 'border-green-400' : 'border-red-400'} transform transition-all duration-300 translate-y-[-20px] opacity-0">
                <i class="fas ${iconClass} mr-3"></i>
                <span>${message}</span>
            </div>
        `);

        $('body').append(toast);

        // 显示动画
        setTimeout(() => toast.removeClass('translate-y-[-20px] opacity-0'), 10);

        // 自动隐藏
        setTimeout(() => {
            toast.addClass('translate-y-[-20px] opacity-0');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }
</script>
</body>
</html>